<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '分公司管理',
			size: '60%'
		}"
		@close="load = false"
	>
		<cl-crud ref="crud" @load="onLoad">
			<el-row type="flex" align="middle">
				<cl-filter-group v-model="search" ref="filter">
					<cl-filter label="关键字">
						<el-input
							v-model="search.company_name"
							placeholder="请输入分公司名称"
							clearable
							style="width: 200px"
							@change="refresh()"
						/>
					</cl-filter>
				</cl-filter-group>
				<cl-flex1 />
				<el-button icon="el-icon-plus" type="primary" @click="openForm()">
					新增分公司
				</el-button>
			</el-row>

			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-status="{ scope: { row } }">
						<el-tag :type="row.status == 1 ? '' : 'danger'">
							{{ row.status == 1 ? "正常" : "关闭" }}
						</el-tag>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="primary" @click="edit(row)"> 修改 </el-button>
							<el-button type="danger" @click="copy(row)"> 复制 </el-button>
							<el-button @click="remove(row)"> 删除 </el-button>
						</div>
					</template>
				</cl-table>
			</el-row>
		</cl-crud>
		<company-form ref="form" :biz_id="search.biz_id" @confirm="reset" />
	</cl-drawer>
</template>
<script>
import CompanyForm from "./company-form";

export default {
	name: "company-manage-drawer",
	components: {
		CompanyForm
	},
	data() {
		return {
			load: false,
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", align: "center", width: 50, fixed: true },
					{
						label: "分公司名称",
						prop: "company_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "负责人",
						prop: "company_contact",
						width: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "联系电话", prop: "company_mobile", width: 120 },
					{ label: "状态", prop: "status", width: 80 },
					{ label: "操作", prop: "opt", width: 215, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				company_name: ""
			}
		};
	},
	methods: {
		open({ biz_id }) {
			this.load = true;
			this.search.biz_id = biz_id;
			this.$refs.drawer.create(() => {
				this.refresh();
			});
		},
		close() {
			this.load = false;
			this.$refs.drawer.close();
		},
		onLoad({ ctx, app }) {
			if (!this.load) return;
			ctx.service(this.$service.company)
				.set("dict", {
					api: {
						page: "list"
					}
				})
				.done();
			app.refresh(this.search);
		},
		reset() {
			this.$refs.filter.reset();
			// this.refresh();
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		edit(row) {
			this.openForm("edit", row);
		},
		copy(row) {
			this.openForm("copy", row);
		},
		openForm(type = "add", data = {}) {
			this.$refs.form.open(type, data);
		},
		remove({ company_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.company.remove({ company_id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		}
	}
};
</script>
<style lang="scss" scoped></style>
